﻿<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8" />
    <title>itemDetailPage</title>

    <!-- WinJS references -->
    <link href="//Microsoft.WinJS.1.0/css/ui-dark.css" rel="stylesheet" />
    <script src="//Microsoft.WinJS.1.0/js/base.js"></script>
    <script src="//Microsoft.WinJS.1.0/js/ui.js"></script>
    <link href="../../../css/bixaps.ui.css" rel="stylesheet" />
    <link href="../../../css/bixaps.ui-dark.css" rel="stylesheet" />
     <script src="../../../js/bixaps.ui.js"></script>
    
     <script src="../../../js/data.js"></script>

    <link href="../../../css/itemDetail.css" rel="stylesheet" />

    <!--    <script src="/js/data.js"></script>
        <script src="/pages/itemDetail/itemDetail.js"></script>-->
    <style>
        .hide {
            display: none;
        }
        .show {
            display: inline-block;
        }
    </style>
    <script>
        function showhide(id) {
            var p = document.getElementById(id);
            p.className = p.className == 'show' ? 'hide' : 'show';
        }
    </script>
</head>
<body>
    <!-- The content that will be loaded and displayed. -->
    <div class="itemdetailpage fragment">
        <header aria-label="Header content" role="banner">
            <button class="win-backbutton" aria-label="Back" disabled type="button"></button>
            <h1 class="titlearea win-type-ellipsis">
                <span class="pagetitle"></span>
            </h1>
        </header>
        <div class="content" aria-label="Main content" role="main">



            <article>
            <div class="item-content">
                <div id="headerTemp1" data-win-control="WinJS.Binding.Template">
                    <h3 data-win-bind="textContent: title"></h3>
                </div>
                <div id="headerTemp" data-win-control="WinJS.Binding.Template">
                    <h5 data-win-bind="textContent: title"></h5>
                </div>
                <div id="customDataTemp" data-win-control="WinJS.Binding.Template">

                    <div data-win-bind="innerHTML: data">
                           
                    </div>

                </div>
                <div id="itemTemp" data-win-control="WinJS.Binding.Template">
                    <span data-win-bind="textContent: text"></span>
                </div>
                <div id="formTemp" data-win-control="WinJS.Binding.Template">

                    <div>
                        <label data-win-bind="textContent:text"></label>
                        <input type="text" data-win-bind="value:value" />
                        <label>Countries</label>
                        <select id="countries">
                            <option>Australia</option>
                            <option>India</option>
                            <option>Singapore</option>
                        </select>

                    </div>

                </div>
                   <div id="expanderInner" data-win-control="WinJS.Binding.Template">

                      <div id="Div5" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#formTemp')
	
	,expanded:true
	,contentDataSource:sampleLeft4.data
	,headerDataSource:sampleLeft4
}">
                    </div>
                </div>
                
                <br />
   
                <!---------------- Start Example  Down   ---------------->
                <div id="exampledown"  >
                    <h2>Expander Down examples</h2>
                    <br/>
                    <br />
                    <div id="Div1" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expanded:false
	,contentDataSource:sampleDown1
	,headerDataSource:sampleDown1
	,pointerPosition:'left'
}">
                    </div>
                        
                    <br />
                    <br />
                    <div style="width: 400px;">

                        <div id="expander" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expanded:false
	,contentDataSource:sampleDown2
	,headerDataSource:sampleDown2
}">
                        </div>
                    </div>

                    <br />
                    <br />


                    <div id="Div6" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expanded:true
	,contentDataSource:sampleDown3
	,headerDataSource:sampleDown3
	,icons:{
		expand:'&#8964;',
		collapse:'&#707;'
	}
}">
                    </div>

                    <br />
                    <br />
                    <div id="Div7" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#formTemp')
	,expanded:false
	,contentDataSource:sampleDown4.data
	,headerDataSource:sampleDown4
}">
                    </div>
                        
                    <br />
                    <br />

                </div>
                     
                <!-- End of example down -->
                    
                <!---------------- Start Example  Up---------------->

                <div id="exampleup" >

                    <h2>Expander Up examples</h2>
                    <br/>
                    <br />
                    <div id="Div2" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expanded:false
	,expandDirection:'up'
	,contentDataSource:sampleUp1
	,headerDataSource:sampleUp1
	,pointerPosition:'left'
}">
                    </div>
                        
                    <br />
                    <br />
                    <div style="width: 400px;">

                        <div id="Div8" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expanded:false
	,expandDirection:'up'
	,contentDataSource:sampleUp2
	,headerDataSource:sampleUp2
}">
                        </div>
                    </div>

                    <br />
                    <br />


                    <div id="Div9" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expandDirection:'up'
	,expanded:true
	,contentDataSource:sampleUp3
	,headerDataSource:sampleUp3
	,icons:{
		expand:'&#8964;',
		collapse:'&#707;'
	}
}">
                    </div>

                    <br />
                    <br />
                    <div id="Div10" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#formTemp')
	,expandDirection:'up'
	,expanded:false
	,contentDataSource:sampleUp4.data
	,headerDataSource:sampleUp4
}">
                    </div>
                        
                    <br />
                    <br />

                </div>
                    
                <!-- End of example Up-->
                    
                <!-- Start of example Right-->
                <div id="exampleright" >

                    <h2>Expander Right examples</h2>
                    <br/>
                    <br />
                    <div id="Div3" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expandDirection:'right'
	,contentDataSource:sampleRight1
	,headerDataSource:sampleRight1
	,pointerPosition:'right'
}">
                    </div>
                        
                    <br />
                    <br />
                    <div style="width: 400px;">

                        <div id="Div11" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expandDirection:'right'
	,contentDataSource:sampleRight2
	,headerDataSource:sampleRight2
}">
                        </div>
                    </div>

                    <br />
                    <br />


                    <div id="Div12" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expandDirection:'right'
	,expanded:true
	,contentDataSource:sampleRight3
	,headerDataSource:sampleRight3
}">
                    </div>

                    <br />
                    <br />
                    <div id="Div13" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#formTemp')
	,expandDirection:'right'
	,expanded:false
	,contentDataSource:sampleRight4.data
	,headerDataSource:sampleRight4
}">
                    </div>
                        
                    <br />
                    <br />

                </div>
           
            <!-- End of example right-->

                <!-- Start of example Left-->
                <div id="exampleleft" >

                    <h2>Expander Left examples</h2>
                    <br/>
                    <br />
                    <div id="Div14" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expandDirection:'left'
	,contentDataSource:sampleLeft1
	,headerDataSource:sampleLeft1
	,pointerPosition:'right'
}">
                    </div>
                        
                    <br />
                    <br />
                    <div style="width: 400px;">

                        <div id="Div15" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expandDirection:'left'
	,contentDataSource:sampleLeft2
	,headerDataSource:sampleLeft2
}">
                        </div>
                    </div>

                    <br />
                    <br />


                    <div id="Div16" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#customDataTemp')
	,expandDirection:'left'
	,expanded:true
	,contentDataSource:sampleLeft3
	,headerDataSource:sampleLeft3
}">
                    </div>

                    <br />
                    <br />
                    <div id="Div17" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#formTemp')
	,expandDirection:'left'
	,expanded:false
	,contentDataSource:sampleLeft4.data
	,headerDataSource:sampleLeft4
}">
                    </div>
                        
                    <br />
                    <br />

                </div>
                <!-- End of example Left-->
                  <!-- Start of example expander in expander-->
                    <div id="exampleexpander" >
                        Expander with form elements
                        <br/>
                        <div id="Div4" data-win-control="Bixaps.UI.Expander" data-win-options="{
	headerTemplate: select('#headerTemp')
	,contentTemplate: select('#expanderInner')
  
	,contentDataSource:sampleInner
	,headerDataSource:sampleInner
}">
                    </div>

                    <br />
                    <br />
                    </div>

                </div>
            </article>
        </div>
    </div>

</body>
</html>
